import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { ConfigProvider, theme } from "antd"
import zhCN from "antd/lib/locale/zh_CN"
import MainLayout from "./layouts/MainLayout"
import Dashboard from "./pages/Dashboard"
import ProjectsView from "./pages/ProjectsView"
import DepartmentView from "./pages/DepartmentView"
import ProjectDetail from "./pages/ProjectDetail"
import ModuleDetail from "./pages/ModuleDetail"
import SettingsPage from "./pages/SettingsPage"
import { HostsProvider } from "./contexts/HostsContext"
import "./App.css"

const App = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: "#3b82f6",
          borderRadius: 6,
          colorBgContainer: "#fff",
          colorBgLayout: "#f9fafb",
          fontFamily:
            "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
        },
        components: {
          Card: {
            colorBgContainer: "#fff",
            boxShadowTertiary: "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
          },
          Table: {
            borderRadius: 8,
          },
          Button: {
            borderRadius: 6,
          },
        },
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <HostsProvider>
        <Router>
          <Routes>
            <Route path="/" element={<MainLayout />}>
              <Route index element={<Dashboard />} />
              <Route path="projects" element={<ProjectsView />} />
              <Route path="departments/:departmentId" element={<DepartmentView />} />
              <Route path="projects/:projectId" element={<ProjectDetail />} />
              <Route path="projects/:projectId/modules/:moduleId" element={<ModuleDetail />} />
              <Route path="settings" element={<SettingsPage />} />
            </Route>
          </Routes>
        </Router>
      </HostsProvider>
    </ConfigProvider>
  )
}

export default App
